<template>
  <view class="payment-container">
    <!-- 倒计时 -->
    <view class="countdown">
      剩余支付时间：{{ formattedTime }}
    </view>

    <!-- 商品总价 -->
    <view class="total-section">
      <text class="total-label">总金额：</text>
      <text class="total-amount">¥{{ totalPrice }}</text>
    </view>

    <!-- 支付方式 -->
    <view class="payment-methods">
      <text class="section-title">选择支付方式</text>
      <radio-group @change="handlePaymentChange">
        <label class="method-item" v-for="method in paymentMethods" :key="method.value">
          <view class="method-left">
            <image class="method-icon" :src="method.icon"></image>
            <text>{{ method.name }}</text>
          </view>
          <radio :value="method.value" :checked="selectedMethod === method.value" />
        </label>
      </radio-group>
    </view>

    <!-- 支付按钮 -->
    <view class="pay-button">
      <button 
        :class="['pay-btn', selectedMethod]" 
        @click="handlePayment"
        :disabled="!selectedMethod"
      >
        {{ buttonText }}
      </button>
    </view>
  </view>
</template>

<script>
<<<<<<< HEAD
	import config from '../../config';
	
	export default {
	  data() {
	    return {
	      // 从上级页面传入的总金额
	      paymentMethods: [    // 支付方式列表
	        {
	          name: '微信支付',
	          value: 'wechat'
	        },
	        {
	          name: '支付宝支付',
	          value: 'alipay'
	        }
	      ],
	      totalPrice: 0,
	      cartList: [],
	      selectedMethod: '',  // 选中的支付方式
	      countdown: 1800,     // 30分钟倒计时（秒）
	      timer: null          // 定时器
	    };
	  },
	  computed: {
	    // 格式化倒计时显示
	    formattedTime() {
	      const minutes = Math.floor(this.countdown / 60);
	      const seconds = this.countdown % 60;
	      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
	    },
	    // 按钮显示文字
	    buttonText() {
	      return this.selectedMethod? `确认支付（${this.formattedTime}）` : '请选择支付方式';
	    }
	  },
	  onLoad(options) {
	    console.log("option----------", options);
	    // 接收订单总价参数
	    if (options.total) {
	      this.totalPrice = parseFloat(options.total);
	    }
	    // 启动倒计时
	    this.startCountdown();
	  },
	  onShow() {
	    this.fetchCartData();
	  },
	  methods: {
	    total() {
	      this.totalPrice = 0;
	      this.cartList.forEach(item => {
	        this.totalPrice += item.price * item.count;
	      });
	      return this.totalPrice;
	    },
	    fetchCartData() {
	      uni.request({
	        url: config.URL + "/cart",
	        method: 'GET',
	        data: { userId: uni.getStorageSync('ID') },
	        success: res => {
	          this.cartList = res.data;
	          console.log(this.cartList);
	          this.total();
	        },
	        fail: error => {
	          console.error('获取购物车数据失败:', error);
	        }
	      });
	    },
	    // 开始倒计时
	    startCountdown() {
	      this.timer = setInterval(() => {
	        if (this.countdown > 0) {
	          this.countdown--;
	        } else {
	          clearInterval(this.timer);
	          uni.showToast({
	            title: '支付超时，订单已取消',
	            icon: 'none'
	          });
	          setTimeout(() => {
	            uni.navigateBack();
	          }, 1500);
	        }
	      }, 1000);
	    },
	    // 选择支付方式
	    handlePaymentChange(e) {
	      this.selectedMethod = e.detail.value;
	    },
	    // 处理支付
	    handlePayment() {
	      if (!this.selectedMethod) {
	        uni.showToast({
	          title: '请先选择支付方式',
	          icon: 'none'
	        });
	        return;
	      }
	
	      // 模拟支付流程
	      uni.showLoading({ title: '支付处理中...' });
	      setTimeout(() => {
	        uni.showToast({
	          title: '支付成功',
	          icon:'success'
	        });
	        uni.hideLoading();
	
	        // 支付成功跳转
	        uni.switchTab({
	          url: '/pages/order/index'
	        });
	
	        const items = this.cartList;
	        const deletePromises = items.map(item => {
	          return new Promise((resolve, reject) => {
	            uni.request({
	              url: config.URL + `/cart/${item.id}`,
	              method: 'DELETE',
	              success: () => {
	                console.log(`ID 为 ${item.id} 的记录已删除`);
	                resolve();
	              },
	              fail: error => {
	                console.error(`删除 ID 为 ${item.id} 的记录时出错`, error);
	                reject(error);
	              }
	            });
	          });
	        });
	
	        Promise.all(deletePromises).then(() => {
	          this.cartList = []; // 清空本地 cartList
	          // 这里假设 classifyCartItems 是你定义的方法，如果没有需要补充
	          // this.classifyCartItems(); 
	          uni.showToast({
	            title: '购物车已清空',
	          });
	        })
	        .catch(error => {
	          console.error('删除操作出错', error);
	        });
	      }, 2000);
	    }
	  },
	  beforeDestroy() {
	    // 清除定时器
	    clearInterval(this.timer);
	  }
	}
=======
import axios from 'axios'
export default {
  data() {
    return {
            // 从上级页面传入的总金额
      paymentMethods: [    // 支付方式列表
        {
          name: '微信支付',
          value: 'wechat',
         
        },
        {
          name: '支付宝支付',
          value: 'alipay',
          
        }
      ],
      totalPrice: 0,
      cartlist:[],
      selectedMethod: '',  // 选中的支付方式
      countdown: 1800,     // 30分钟倒计时（秒）
      timer: null          // 定时器
    };
  },
  computed: {
   
    
    // 格式化倒计时显示
    formattedTime() {
      const minutes = Math.floor(this.countdown / 60)
      const seconds = this.countdown % 60
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    },
    // 按钮显示文字
    buttonText() {
      return this.selectedMethod ? `确认支付（${this.formattedTime}）` : '请选择支付方式'
    }
  },
  onLoad(options) {
    console.log("option----------",options)
    // 接收订单总价参数
    if(options.total) {
      this.totalPrice = parseFloat(options.total)
    }
    // 启动倒计时
    this.startCountdown()
     
  },
  onShow(){
    this.fetchCartData();
 
  },
  
  methods: {

     total(){
       this.totalPrice = 0;
        this.cartList.forEach(item => {
          this.totalPrice += item.price * item.count;
        });
        return this.totalPrice;
    },
  fetchCartData() {
  axios.get("https://67f78cbf7719dfcd4b4774b8.hz-iframe-svc.simplelab.cn/cart", {
    params: { userId: uni.getStorageSync('ID') }
  })
 .then(res => {
    this.cartList = res.data;  // 确保这里使用驼峰式命名
    console.log(this.cartList);
    this.total();              // 在获取到购物车数据后调用total方法
  })
 .catch(error => {
    console.error('获取购物车数据失败:', error);
  });
}
,
    // 开始倒计时
    startCountdown() {
      this.timer = setInterval(() => {
        if(this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
          uni.showToast({
            title: '支付超时，订单已取消',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      }, 1000)
    },
    // 选择支付方式
    handlePaymentChange(e) {
      this.selectedMethod = e.detail.value
    },
    // 处理支付
    handlePayment() {
      if(!this.selectedMethod) {
        uni.showToast({
          title: '请先选择支付方式',
          icon: 'none'
        })
        return
      }

      // 模拟支付流程
      uni.showLoading({ title: '支付处理中...' })
      setTimeout(() => {
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })
        uni.hideLoading()
        
        // 支付成功跳转
        uni.switchTab({
          url: '/pages/order/index'
        })
      
      }, 2000)


  axios.get("https://67f78cbf7719dfcd4b4774b8.hz-iframe-svc.simplelab.cn/cart",{
    params: {
      userId: uni.getStorageSync('ID')
    }
  })
    .then(res => {
      const items = res.data;
      const deletePromises = items.map(item => {
        return axios.delete(`https://67f78cbf7719dfcd4b4774b8.hz-iframe-svc.simplelab.cn/cart/${item.id}`)
          .then(() => {
            console.log(`ID 为 ${item.id} 的记录已删除`);
           
          })
          .catch(error => {
            console.error(`删除 ID 为 ${item.id} 的记录时出错`, error);
          });
      });

      Promise.all(deletePromises).then(() => {
        this.cartList = []; // 清空本地 cartList
        this.classifyCartItems(); // 重新分类
        uni.showToast({
          title: '购物车已清空',
        });
      })
      .catch(error => {
        console.error('删除操作出错', error);
      });
    })
    .catch(error => {
      console.error('获取数据时出错', error);
    });


    }
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer)
  }
}
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
</script>

<style scoped>
.payment-container {
  padding: 20rpx;
}

.countdown {
  text-align: center;
  color: #e64340;
  font-size: 14px;
  padding: 20rpx 0;
}

.total-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
}

.total-label {
  font-size: 16px;
  color: #333;
}

.total-amount {
  font-size: 20px;
  color: #e64340;
  font-weight: bold;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  padding: 20rpx 0;
}

.payment-methods {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.method-left {
  display: flex;
  align-items: center;
}

.method-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.pay-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
}

.pay-btn {
  background: #09bb07;
  color: #fff;
  border-radius: 50rpx;
}

.pay-btn[disabled] {
  background: #ccc;
}

.pay-btn.wechat {
  background: #09bb07;
}

.pay-btn.alipay {
  background: #1677ff;
}
</style>